<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		v-model
		1. input 的 value值   input text password/textarea
		2. input 的 选中状态   input checkbox radio/ select option
	    
		表单修饰符
		.lazy: 失去焦点的时候才会同步数据
	    .trim: 去掉前后空格（中间空格去不了）
		.number: 将input里面字符串(string)的值转化为数值(number)
		<div id="app">
			下拉列表：
			<select v-model="selected">
				<option 
				v-for="item in options"
				:value="item.value">
					{{item.text}}
				</option>
			</select>
			{{selected}}
			<br><br>
			
			<input type="checkbox" v-model="checked" 
			true-value="yes" false-value="no">one
			{{checked}}
			<br><br>
			
			<input type="text" v-model.number="inpValue" @keydown="show">
			{{inpValue}}
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
				   options:[
					   {value:"a",text:"AAA"},
					   {value:"b",text:"BBB"},
					   {value:"c",text:"CCC"}
				   ],
				   selected:"a",
				   checked:"no",
				   inpValue:""
				},
				methods:{
					show(){
						console.log(typeof this.inpValue);
						console.log(this.inpValue);
					}
				}
			})
		</script>
	</body>
</html>
